<template>
  <el-main :style="{height:mainHeight+'px'}">
    <el-row gutter="20" style="margin-bottom: 20px">
      <el-col :span="8">
        <el-card style="height: 280px">
          <template #header>
            <div class="card__header">
              <span>学区房</span>
            </div>
          </template>
          <div>施工区域</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card style="height: 280px">
          <template #header>
            <div class="card__header">
              <span>市政厅</span>
            </div>
          </template>
          <div>施工区域</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card style="height: 280px">
          <template #header>
            <div class="card__header">
              <span>体育场</span>
            </div>
          </template>
          <div>施工区域</div>
        </el-card>
      </el-col>
    </el-row>
    <div style="display: flex">
      <el-card style="flex:1;">
        <template #header>
          <div class="card__header">
            <span>订单统计</span>
          </div>
        </template>
        <div class="chartsArea" ref="myChart0"></div>
      </el-card>
      <el-card style="margin-left: 20px;flex:1;">
        <template #header>
          <div class="card__header">
            <span>热门商品</span>
          </div>
        </template>
        <div class="chartsArea" ref="myChart1"></div>
      </el-card>
      <el-card style="margin-left: 20px;flex:1;">
        <template #header>
          <div class="card__header">
            <span>最受欢迎</span>
          </div>
        </template>
        <div class="chartsArea" ref="myChart2"></div>
      </el-card>
    </div>
    <el-row gutter="20" style="margin-top: 20px">
      <el-col :span="24">
        <el-card style="height: 200px">
          <div>超级海景房</div>
        </el-card>
      </el-col>
    </el-row>
  </el-main>
</template>

<script setup lang="ts">
import {nextTick, onMounted, reactive, ref} from "vue";
import useInstance from "@/hocks/useInstance.ts";

const {global} = useInstance()
const mainHeight = ref(0)
const myChart0 = ref<HTMLElement>()
const myChart1 = ref<HTMLElement>()
const myChart2 = ref<HTMLElement>()

const chart1 = () => {
  const echartInstance = global.$echarts.init(myChart0.value)
  let option = reactive({
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
      }
    ]
  })
  //实际项目中在这里通过axios发送请求获取数据设置到option的xAxis,yAxis,series的data里面
  echartInstance.setOption(option)
}

const chart2 = () => {
  const echartInstance = global.$echarts.init(myChart1.value)
  let option = reactive({
    legend: {
      top: 'bottom'
    },
    toolbox: {
      show: true,
      feature: {
        mark: {show: true},
        dataView: {show: true, readOnly: false},
        restore: {show: true},
        saveAsImage: {show: true}
      }
    },
    series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: [50, 250],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8
        },
        data: [
          {value: 40, name: 'rose 1'},
          {value: 38, name: 'rose 2'},
          {value: 32, name: 'rose 3'},
          {value: 30, name: 'rose 4'},
          {value: 28, name: 'rose 5'},
          {value: 26, name: 'rose 6'},
          {value: 22, name: 'rose 7'},
          {value: 18, name: 'rose 8'}
        ]
      }
    ]
  });
  echartInstance.setOption(option)
}

const char3 = () => {
  const xAxisData = [];
  const data1 = [];
  const data2 = [];
  for (let i = 0; i < 100; i++) {
    xAxisData.push('A' + i);
    data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
    data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
  }
  const echartInstance = global.$echarts.init(myChart2.value)
  let option = {
    title: {
      text: 'Bar Animation Delay'
    },
    legend: {
      data: ['bar', 'bar2']
    },
    toolbox: {
      // y: 'bottom',
      feature: {
        magicType: {
          type: ['stack']
        },
        dataView: {},
        saveAsImage: {
          pixelRatio: 2
        }
      }
    },
    tooltip: {},
    xAxis: {
      data: xAxisData,
      splitLine: {
        show: false
      }
    },
    yAxis: {},
    series: [
      {
        name: 'bar',
        type: 'bar',
        data: data1,
        emphasis: {
          focus: 'series'
        },
        animationDelay: function (idx) {
          return idx * 10;
        }
      },
      {
        name: 'bar2',
        type: 'bar',
        data: data2,
        emphasis: {
          focus: 'series'
        },
        animationDelay: function (idx) {
          return idx * 10 + 100;
        }
      }
    ],
    animationEasing: 'elasticOut',
    animationDelayUpdate: function (idx) {
      return idx * 5;
    }
  };
  echartInstance.setOption(option)
}

onMounted(() => {
  chart1()
  chart2()
  char3()
  nextTick(() => {
    mainHeight.value = window.innerHeight - 110
  })
})
</script>

<style scoped>
:deep(.el-card__header){
  background-color: rgba(208, 12, 239, 0.25);
}
.chartsArea{
  height: 540px;
}
</style>